<#assign title ="档案添加">
<#include "/include/layout.ftl">
<#macro css>
	<link rel="stylesheet" href="${contextPath}/js/datepicker/datepicker3.css">
</#macro>
<#macro js>
	<script src="${contextPath}/js/validate/additional-methods.js"></script>
</#macro>
<#macro body>
<#import "/include/select.ftl" as items>
	<section class="content-header">
      <h1>
        ${title}
        <small>添加</small>
      	<a class="btn btn-default pull-right back" href="javascript:;"><i class="fa fa-reply"></i> 返回</a>
      </h1>
    </section>
    <section class="content">
 		<div class="box box-info">
 			<div class="row">
 				<div class="col-sm-12">
			        <div class="box-header with-border">
			        	参数信息
			        </div>
			        <form action="${contextPath}/dossier/save" method="post" id="documentForm" class="form-horizontal">
			          <input type="hidden" name="id" value="${data.id}" />
		              <div class="box-body">
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">用户姓名:</label>
		                  <div class="col-sm-3">
		                    <input name="username" value="${data.username}" class="form-control"  placeholder="用户姓名" required maxlength=10 />
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">身份证号码:</label>
		                  <div class="col-sm-3">
		                    <input name="idcard" value="${data.idcard}" class="form-control"  placeholder="身份证号码" required idcard="true" maxlength=18 />
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">出生日期:</label>
		                  <div class="col-sm-3">
		                  	<div class="input-group date">
				                  <input name="birthdate" class="form-control" value="${data.birthdate!""}" id="datepicker" placeholder="出生日期" required />
				                  <div class="input-group-addon">
				                    <i class="fa fa-calendar"></i>
				                  </div>
			                </div>
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">手机号码:</label>
		                  <div class="col-sm-3">
		                    <input name="phone" value="${data.phone}" class="form-control"  placeholder="手机号码" required mobile=true maxlength=11 />
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">是否婚配:</label>
		                  <div class="col-sm-4">
		                  	 <@items.radio name="ismarry" list=statuslist value="${data.ismarry!0}"  class=""  />
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label class="col-sm-2 control-label">病情描述:</label>
		                  <div class="col-sm-8">
		                  	<textarea name="remark" class="form-control" placeholder="病情描述" required maxlength="200" style="resize: none;width:100%;height:100px;">${data.remark}</textarea>
		                  </div>
		                </div>
		                <#if list?? && list?size gt 0>
		                	<#list list as stage>
		                		<div class="form-group stageform" >
				                  <label class="col-sm-2 control-label"><#if stage_index == 0>家族病史:</#if></label>
				                  <div class="col-sm-2">
				                    <input value="${stage.relatives}" class="form-control relatives"  placeholder="亲人称谓，如：爷爷" />
				                  </div>
				                  <div class="col-sm-2">
				                    <input value="${stage.age}"  class="form-control age" type="number"  placeholder="年龄" />
				                  </div>
				                  <div class="col-sm-4">
				                    <input value="${stage.medicalhistory}" class="form-control medicalhistory" type="text"  placeholder="病情描述" />
				                  </div>
				                </div>
		                	</#list>
		                </#if>
		                <div class="form-group stageform" >
		                  <label class="col-sm-2 control-label"><#if list?? && list?size gt 0><#else>家族病史:</#if></label>
		                  <div class="col-sm-2">
		                    <input class="form-control relatives"  placeholder="亲人称谓，如：爷爷" />
		                  </div>
		                  <div class="col-sm-2">
		                    <input class="form-control age" type="number"  placeholder="年龄" />
		                  </div>
		                  <div class="col-sm-4">
		                    <input class="form-control medicalhistory" type="text"  placeholder="病情描述" />
		                  </div>
		                  <div class="col-sm-1">
		                  	<a class="btn btn-info pull-right familyhistory_add" href="javascript:;"><i class="fa fa-plus-circle"></i> 添加</a>
		                  	<a class="btn btn-danger pull-right familyhistory_del hidden" href="javascript:;"><i class="fa fa-trash"></i> 删除</a>
		                  </div>
		                </div>
		                
		              </div>
		              <div class="box-footer">
		              	<div class="col-sm-2"></div>
		              	 <div class="col-sm-6">
		              	 	<a class="btn btn-default" id="reset" ><i class="fa fa-rotate-left"></i> 重置</a>
		              	 	<a class="btn btn-info submit"><i class="fa fa-save"></i> 确定</a>
			             </div>
		              </div>
		            </form>
		             <div class="familyhistory hidden">
			              <div class="form-group stageform">
			                  <label class="col-sm-2 control-label"></label>
			                  <div class="col-sm-2">
			                    <input class="form-control relatives"   placeholder="亲人称谓，如：爷爷" />
			                  </div>
			                  <div class="col-sm-2">
			                    <input class="form-control age" type="number"  placeholder="年龄" />
			                  </div>
			                  <div class="col-sm-4">
			                    <input class="form-control medicalhistory" type="text" placeholder="病情描述" />
			                  </div>
			                  <div class="col-sm-1">
			                  	<a class="btn btn-info pull-right familyhistory_add" href="javascript:;"><i class="fa fa-plus-circle"></i> 添加</a>
			                  	<a class="btn btn-danger pull-right familyhistory_del hidden" href="javascript:;"><i class="fa fa-trash"></i> 删除</a>
			                  </div>
			                </div>
			              </div>
		              </div>
		         </div>
            </div>
        </div>
    </section>
    <script src="${contextPath}/js/datepicker/bootstrap-datepicker.js"></script>
	<script type="text/javascript">
		
		var familyhistory = $(".familyhistory").html();
		
		$(function(){
			$('#datepicker').datepicker();
		
			//添加阶段
			$(".content").on("click",".familyhistory_add",function(){
				$(this).hide();
				$(this).siblings().removeClass("hidden");
				$(this).parents(".form-group").after(familyhistory);
			})
			//删除阶段
			$(".content").on("click",".familyhistory_del",function(){
				$(this).parents(".form-group").remove();
			})
			//提交
			$(".submit").click(function(){
				//阶段参数
				var familyhistory = [];
				var flag = true;
				$(".stageform:visible").each(function(index,element){
					var relatives = $(element).find(".relatives").val();
					var age = $(element).find(".age").val();
					var medicalhistory = $(element).find(".medicalhistory").val();
					if(relatives && age && medicalhistory){
						var json = {};
						json["relatives"] = relatives;
						json["age"] = age;
						json["medicalhistory"] = medicalhistory;
						familyhistory.push(json);
					}
				})
				if (flag && validateForm()) {
					var options = {
							data:{"familyhistory":util.toString(familyhistory)},
							success: showResponse
					}
					$("#documentForm").ajaxSubmit(options);
					return false;
				}
				return false;
			})
			
		
		})
		
		//ajax 返回
		function showResponse(responseText, statusText) {
			var code = responseText.code;
			var msg = responseText.msg;
			if (code == "1") {
				  layer.alert(msg,{icon: 1}, function(index){
					  location.href="${contextPath}/dossier/index.html";
				 	  layer.close(index);
				});  
			} else {
				layer.msg(msg, {icon: 2});
			}
		}	
		
		//表单验证
		function validateForm(){
		   return $("#documentForm").validate().form();
		}
	</script>
</#macro>